<script setup>
import { onMounted, ref } from 'vue'
import { MotionComponent } from '@vueuse/motion'
import AntdIcon from '@/components/AntdIcon/index.vue'
import AddProject from './components/AddProject.vue'
import AddProcess from './components/AddProcess.vue'
import { projectListApi, deleteProjectApi, projectAreaListApi } from '@/service'
import { message, Modal } from 'ant-design-vue'

const addProjectRef = ref()
const addProcessRef = ref()
const projectList = ref([])
const projectAreaList = ref([])
const expandedRowKeys = ref([])
const searchObj = ref({
  page: 1,
  page_size: 3,
  project_title: '',
  is_hot: null, // 是否热门 0.否 1.是
  project_area_id: null,
  project_area_state: null,
})
const total = ref(0)

const expand = (expanded, record) => {
  if (expanded) {
    expandedRowKeys.value.push(record.key)
    console.log(expandedRowKeys.value)
  } else {
    expandedRowKeys.value = expandedRowKeys.value.filter((key) => key !== record.key)
  }
}
const getProjectList = () => {
  const params = {
    ...searchObj.value,
  }
  projectListApi(params).then((res) => {
    total.value = res.total_count
    projectList.value = res.items
    projectList.value.forEach((item) => {
      item.key = 'key' + item.id
    })
  })
}

const getProjectAreaList = () => {
  projectAreaListApi().then((res) => {
    projectAreaList.value = res
  })
}
const search = () => {
  searchObj.value.page = 1
  getProjectList()
}
const paginationChange = (page, size) => {
  searchObj.value.page = page
  searchObj.value.page_size = size
  getProjectList()
}

const addProjectSuccess = () => {
  getProjectList()
}

// 删除项目
const delProject = (id, index) => {
  Modal.confirm({
    title: '删除项目',
    content: '确认删除该项目吗？',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      deleteProjectApi({ project_id: id }).then(() => {
        projectList.value.splice(index, 1)
        message.success('删除成功')
      })
    },
  })
}
// 显示添加弹窗
const showModal = (type, record) => {
  if (type === 'add') {
    addProjectRef.value.open()
  } else {
    // 删除对象中的某些字段，并生成一个新的对象
    // const { 要删除的字段, ...新对象 } = 原对象
    const { create_time, update_time, is_deleted, id, ...newRecord } = record
    const params = { project_id: record.id, ...newRecord }
    addProjectRef.value.open(params)
  }
}

const goProcess = (record) => {
  const { create_time, update_time, is_deleted, id, ...newRecord } = record
  const params = { project_id: record.id, ...newRecord }
  addProcessRef.value.open(params)
}

onMounted(() => {
  getProjectList()
  getProjectAreaList()
})
</script>
<template>
  <div class="flex flex-col gap-5">
    <a-card :bordered="false">
      <a-form ref="formRef" :model="searchObj" autocomplete="off">
        <div class="grid grid-cols-5 gap-5">
          <a-form-item label="标题">
            <a-input v-model:value="searchObj.project_title" placeholder="请输入标题" />
          </a-form-item>
          <a-form-item label="所在洲">
            <a-select
              v-model:value="searchObj.project_area_state"
              placeholder="请选择所在洲"
              @change="searchObj.project_area_id = null"
            >
              <a-select-option :value="1"> 美洲 </a-select-option>
              <a-select-option :value="2"> 欧洲 </a-select-option>
              <a-select-option :value="3"> 亚洲 </a-select-option>
              <a-select-option :value="5"> 非洲 </a-select-option>
              <a-select-option :value="4"> 大洋洲 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="所在地区">
            <a-select v-model:value="searchObj.project_area_id" placeholder="请选择所在地区">
              <a-select-option
                v-for="item in projectAreaList[searchObj.project_area_state]"
                :key="item.id"
                :value="item.id"
              >
                {{ item.project_area_name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="热门">
            <a-select v-model:value="searchObj.is_hot" placeholder="请选择">
              <a-select-option :value="null"> 全部 </a-select-option>
              <a-select-option value="1"> 是 </a-select-option>
              <a-select-option value="0"> 否 </a-select-option>
            </a-select>
          </a-form-item>
          <div class="flex gap-5">
            <a-button class="flex-1" type="default" @click="search">搜索</a-button>
            <a-button class="flex-1" type="primary" @click="showModal('add')">创建项目</a-button>
          </div>
        </div>
      </a-form>
    </a-card>
    <MotionComponent preset="slideVisibleOnceRight">
      <a-card :bordered="false">
        <a-table
          :data-source="projectList"
          :pagination="false"
          :scroll="{ x: 2600 }"
          v-model:expandedRowKeys="expandedRowKeys"
          @expand="expand"
          bordered
        >
          <a-table-column title="#" data-index="id" width="45px" fixed="left" />
          <a-table-column title="项目标题" data-index="project_title" width="150px" fixed="left" />
          <a-table-column title="图片" data-index="project_image_url_1">
            <template #default="{ text: project_image_url_1 }">
              <a-image :src="project_image_url_1" :width="100" :height="60" />
            </template>
          </a-table-column>
          <a-table-column title="图片" data-index="project_image_url_2">
            <template #default="{ text: project_image_url_2 }">
              <a-image :src="project_image_url_2" :width="100" :height="60" />
            </template>
          </a-table-column>
          <a-table-column title="项目简介" data-index="project_intro" width="250px" />
          <a-table-column title="办理周期" data-index="project_handle_cycle">
            <template #default="{ text: project_handle_cycle }">
              <a-tag color="var(--color)" :bordered="false"> {{ project_handle_cycle }} </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="身份" data-index="project_obtain_identity" />
          <a-table-column title="资产要求" data-index="project_asset_requirements" />
          <a-table-column title="申请条件" data-index="project_apply_conditions" width="400px" />
          <a-table-column title="热门" data-index="is_hot">
            <template #default="{ text: is_hot }">
              <a-tag :color="is_hot === 1 ? 'success' : '#f40'" :bordered="false">
                {{ is_hot === 1 ? '是' : '否' }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="洲" data-index="project_area_state">
            <template #default="{ text: project_area_state }">
              <a-tag color="var(--color)" :bordered="false">
                {{
                  project_area_state == 1
                    ? '美洲'
                    : project_area_state == 2
                      ? '欧洲'
                      : project_area_state == 3
                        ? '亚洲'
                        : project_area_state == 4
                          ? '大洋洲'
                          : project_area_state == 5
                            ? '非洲'
                            : ''
                }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="地区" data-index="project_area_name">
            <template #default="{ text: project_area_name }">
              <a-tag color="var(--color)" :bordered="false">
                {{ project_area_name }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="创建时间" data-index="create_time" />
          <a-table-column title="操作" fixed="right" width="160px">
            <template #default="{ record, index }">
              <div class="flex gap-2">
                <a-button type="primary" @click="showModal('edit', record)">
                  <template #icon>
                    <AntdIcon icon="EditOutlined" />
                  </template>
                </a-button>
                <a-button danger @click="delProject(record.id, index)">
                  <template #icon>
                    <AntdIcon icon="DeleteOutlined" />
                  </template>
                </a-button>
                <a-tooltip>
                  <template #title>修改申请流程</template>
                  <a-button type="dashed" @click="goProcess(record)">
                    <template #icon>
                      <AntdIcon icon="SubnodeOutlined" />
                    </template>
                  </a-button>
                </a-tooltip>
              </div>
            </template>
          </a-table-column>
          <template #expandedRowRender="{ record }">
            <div class="flex gap-5">
              <h1 class="font-bold text-2xl">申请流程:</h1>
              <a-timeline
                mode="alternate"
                class="flex-1"
                v-if="record.project_apply_process.length"
              >
                <a-timeline-item
                  v-for="(item, index) in record.project_apply_process"
                  :key="item.title"
                >
                  <template #dot>
                    <div class="w-5 h-5 flex items-center justify-center">{{ index + 1 }}</div>
                  </template>
                  {{ item.title }} - {{ item.content }}
                </a-timeline-item>
              </a-timeline>
              <div class="flex-1 flex justify-center" v-else>该项目暂无流程~</div>
            </div>
          </template>
        </a-table>
        <div class="mt-5 w-full flex justify-end">
          <a-pagination
            v-model:current="searchObj.page"
            v-model:pageSize="searchObj.page_size"
            show-size-changer
            :pageSizeOptions="['3', '5', '10', '20']"
            :total="total"
            :show-total="(total) => `共 ${total} 条数据`"
            @change="paginationChange"
          />
        </div>
      </a-card>
    </MotionComponent>
    <AddProject ref="addProjectRef" @addProject="addProjectSuccess" />
    <AddProcess ref="addProcessRef" @addProcess="addProjectSuccess" />
  </div>
</template>
<style scoped>
:deep(.ant-timeline .ant-timeline-item-head-custom) {
  padding-block: 0 !important;
  border-radius: 50% !important;
}
</style>
